Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/custom/dashboard/statsBar.tsx`:
- Around line 148-173: The two MetricSection bindings are inconsistent: change
the Scheduled Jobs MetricSection to read the scheduled count from jobMetrics
(use jobMetrics.scheduled_jobs_count) instead of jobMetrics.running_jobs_count,
and change the Running Jobs MetricSection to use the snake_case running count
(jobMetrics.running_jobs_count) instead of jobMetrics.runningJobsCount so both
metrics match the payload's snake_case keys used elsewhere (e.g., job_count).
- Around line 47-50: The runtime-built Tailwind class `${bgColorLight}/5` in the
className passed to cn prevents Tailwind from generating the background opacity
utility; change the component API to accept a fully-qualified tint class (e.g.,
"bg-metric1-light/5") instead of bgColorLight and use that prop directly in the
className; update references to the prop name (e.g., tintClass or bgTint) in the
component where cn is used (and anywhere StatsBar is instantiated) and remove
any runtime string interpolation that appends "/5", preserving the hasError
branch that uses "bg-destructive/5".

In `@src/components/custom/DrawerJobEvents.tsx`:
- Around line 74-83: The virtualizer is using index-based identity which causes
remounts when latestEvents are prepended; update the useVirtualizer call that
creates rowVirtualizer to include a getItemKey function that returns a stable
unique identifier from each event object in allEvents (e.g., event.id or
event.eventId, falling back to a composite of timestamp+type only if no stable
id exists) so items keep stable identity when latestEvents is prepended and you
can remove the timeout remount workaround; reference the useVirtualizer call
(rowVirtualizer) and the allEvents/latestEvents arrays when implementing this
change.

In `@src/components/custom/DrawerLatestRuns.tsx`:
- Around line 141-144: The code dereferences the resolved value of
getLatestRuns() (and similarly getMoreRuns()) without guarding against its
error-path fallback (which can resolve to []). Update the promise handlers for
getLatestRuns() and getMoreRuns() so they first check the resolved value and
provide a safe default (e.g., an object with data: [] and total: 0) before
calling setLogItems and setItemsTotal; alternatively, destructure with defaults
or early-return when data is falsy so the drawer falls back to the empty state
instead of crashing. Ensure you modify the promise then() callbacks where
setLogItems and setItemsTotal are invoked and handle both success shape and the
error fallback consistently.

In `@src/components/custom/general/LogFileList.tsx`:
- Line 36: The createAt value is being set using logFile.date?.toString(), which
yields a decimal string that moment() may misparse; update the code that assigns
createAt (used by FileItem) to pass a parse-safe ISO or numeric timestamp
instead—e.g., convert the numeric Unix timestamp to a Number or an ISO string
before assigning (use logFile.date as a Number or new
Date(logFile.date).toISOString()), so FileItem/moment() receives a reliably
parseable date; locate the createAt assignment in LogFileList and replace the
toString() usage accordingly.

In `@src/components/custom/general/MultiTypedInput.tsx`:
- Line 57: The change removed the default for the MultiTypedInput "type" prop
which unintentionally exposes the mode picker (see MultiTypedInput component
around the mode-picker logic at lines ~225-235) and allows "exact"/"regex"
values for fields like averageTime; to fix, restore the previous default type
behavior in MultiTypedInput (so the picker is hidden and "between"-style remains
the only selection) or update callers that expect only "between" (notably
advancedJobFilteringDialog's averageTime usage) to explicitly pass
type="between" or acceptedInputTypes={["between"]} so the UI cannot produce
invalid payloads.
- Around line 136-149: The handleRegexChange callback currently only reports
validation errors via onError when validateRegex(newValue) returns an error, but
never clears a previous error when the pattern becomes valid; update
handleRegexChange (and use validateRegex) so that after computing error you call
onError?.({ name }, error) when error exists and otherwise call onError?.({ name
}, undefined) (or null per your onError contract) to clear the stale error, then
proceed to setRegexValue and onChange as before.
- Around line 153-160: handleBetweenChange closes over the stale betweenValue;
change it to use a functional state update and remove betweenValue from the
dependency array: inside handleBetweenChange (the function defined with
useCallback) call setBetweenValue(prev => { const updated = { ...prev, [field]:
newValue, type: "between" }; onChange?.(updated); return updated; }) and keep
only onChange and setBetweenValue in the useCallback deps so the callback never
reads a stale betweenValue.
- Around line 102-117: handleTypeChange currently resets state and emits
payloads with the wrong shape when a controlled type prop is synced, and its
dependencies are incomplete; change the sync effect that reads prop `type` to
set `inputType` directly (do not call handleTypeChange on mount/prop-sync) so it
won’t reset values or emit mismatched payloads, and update handleTypeChange to
emit type-correct payloads (include the proper `type` field for exact/regex and
`{ type: "between", value1, value2 }` for between) when invoked by user actions;
also add the missing dependencies: include `name` in handleTypeChange, include
`betweenValue` in handleBetweenChange, and add `inputType` and
`handleTypeChange` to the effect that syncs controlled `type` prop so hooks
don’t use stale closures.

In `@src/components/custom/jobsTable/advancedJobFilteringDialog.tsx`:
- Around line 218-220: The current code returns the full FlexibleInput objects
(e.g., values.name, values.cronSetting, values.consumer) which contain {value,
type} instead of scalar strings, causing advancedFilters to propagate nested
objects into JobsService (affecting filterJobs and exportJobsToJSON); change the
assignments so they return the scalar text (e.g., use values.name?.value ?
values.name.value : undefined for name, and likewise for cronSetting and
consumer) so advancedFilters sends plain strings to the service.

In `@src/components/custom/notifications/NotificationServicesPanel.tsx`:
- Line 385: The details pane wrapper in NotificationServicesPanel (the div with
class "flex flex-col gap-2 overflow-y-auto") needs a bounded height so it
becomes the scroll container; update that element to include a height constraint
(e.g., add "h-full" or "min-h-0") in its class list so it doesn't auto-size and
the overflow-y works, and if the Spinner component wraps children with its own
container apply the same "min-h-0" constraint to the Spinner wrapper so the
scroll behavior remains contained.

In `@src/components/ui/date-picker-presets.tsx`:
- Line 147: The border classes are on the wrong element; remove "border-2
border-border" from the SelectValue className and add those classes to the
SelectTrigger className so the trigger renders the control chrome while
SelectValue keeps only text/placeholder styles (e.g., keep "bg-background
text-foreground" on SelectValue and ensure SelectTrigger receives "border-2
border-border" alongside its existing classes).

In `@src/components/ui/sidebar.tsx`:
- Line 225: The desktop sidebar's root element currently uses the class string
"group peer hidden md:block text-sidebar-foreground z-50" which conflicts with
modal/sheet/dropdown z-50 layers; update the sidebar's className in
src/components/ui/sidebar.tsx (the element with that exact string) to use a
lower z-index (e.g., z-40 or remove the z-* utility) so dialogs/sheets/menus
(which use z-50) deterministically render above the Sidebar.

In `@src/features/jobsTable/interfaces.tsx`:
- Around line 113-116: The flex container currently has the truncation class
which won't ellipsize because the flex item needs a shrinkable basis; update the
JSX so the outer div keeps "flex gap-2 text-[13px] items-center font-light"
(remove "truncate") and add "min-w-0" to that outer div, then move "truncate"
(and optionally "overflow-hidden" and "whitespace-nowrap" if used elsewhere) to
the consumer text node that renders row.original.consumer (the element alongside
<FileArchive />) so long consumer names properly ellipsize.

In `@src/features/jobsTable/jobsTable.tsx`:
- Around line 71-75: The empty-state branch currently applies min-h-[800px] when
data.length === 0 causing an oversized blank panel; change the conditional class
logic inside the component that builds className (the cn call using size and
data.length) to apply a bounded, compact empty-state height (for example replace
"min-h-[800px]" with a smaller bounded class such as "min-h-[160px] h-auto
max-h-[40vh] flex items-center justify-center" or similar design-system
empty-state classes) so the table stays within the viewport-bounded area and
visually shows a no-results state; make the same adjustment to the other
identical block that handles the empty rows (the second cn/className usage
around the lines referenced).

In `@src/hooks/useJobEvents.tsx`:
- Around line 122-125: The callbacks in useJobEvents.tsx (notably readEvents
plus the callbacks at the .finally block and the other two callbacks referenced)
close over a stale changeCounter; replace setChangeCounter(changeCounter + 1)
with the functional updater setChangeCounter(c => c + 1) in each location so
updates are always based on the latest state, and ensure readEvents and the
other callbacks no longer rely on changeCounter in their dependency arrays (use
the functional updater instead of adding changeCounter to deps); look for the
symbol readEvents and the three occurrences of setChangeCounter in the file and
update them to use the functional form.

---

Outside diff comments:
In `@src/components/custom/general/LogFileList.tsx`:
- Around line 28-46: The memoized FileList created by useMemo currently lists
[props.logFiles, props.readLogFile] but omits props.originName and
props.downloadLogFile, causing stale values when those props change; update the
useMemo dependency array for the FileList variable (the useMemo call that builds
FileItemProps) to include props.originName and props.downloadLogFile along with
props.logFiles and props.readLogFile so the memo recalculates when any of those
inputs change.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/custom/dashboard/statsBar.tsx`:
- Around line 79-86: The Tooltip instance (Tooltip, TooltipTrigger,
TooltipContent) needs to be wrapped with Radix's TooltipProvider to provide
context; import TooltipProvider and wrap the existing Tooltip block (the
component using FileWarningIcon and tooltipContent) with <TooltipProvider> so
the provider is an ancestor of Tooltip; ensure the import list for Tooltip
includes TooltipProvider and that any props required by TooltipProvider (if used
elsewhere) are passed through.
- Around line 57-63: The nested ternary mapping of the textSize prop in the
className (inside the StatsBar component in statsBar.tsx) is redundant because
textSize already contains the Tailwind class string; replace the ternary logic
in the cn(...) call to include textSize directly (e.g., pass textSize) and
provide a fallback default like "text-2xl" when textSize is falsy to preserve
current behavior; update any references to the textSize prop usage to rely on
the direct class string instead of remapping.

In `@src/components/custom/general/MultiTypedInput.tsx`:
- Line 119: The dependency arrays in MultiTypedInput's hooks include stable
React state setters (setExactValue, setRegexValue, setBetweenValue)
unnecessarily; remove these setters from the dependency arrays of the affected
callbacks/effects (the hooks referencing onChange, onError, name) so only actual
changing deps (e.g., onChange, onError, name) remain—apply the same removal to
the other two occurrences in the file that match the pattern.

In `@src/features/jobsTable/jobsPage.tsx`:
- Line 271: The sentinel div with ref (the line <div ref={ref}
className="h-[1px]"></div>) is used with useInView but useInView is defaulting
to the viewport, so when the table has a fixed internal scroll
(size="h-[calc(100vh-150px)]") the sentinel stays visible and the sticky header
never toggles; update the useInView call to supply the table scrolling container
as the root option (i.e., pass the element reference for the table
container/wrapper used for the fixed-height scroll) so the intersection observer
is scoped to that container, or alternatively remove/adjust the sentinel and
sticky styling if sticky behavior is no longer desired.

In `@src/features/jobsTable/jobsTable.tsx`:
- Line 176: The className string in the JSX element in jobsTable.tsx contains a
leading space (" flex absolute w-full border-b-border"); remove the leading
space so the attribute reads "flex absolute w-full border-b-border". Locate the
JSX element with className=" flex absolute w-full border-b-border" and update
the string to drop the initial space to match other class definitions.
- Around line 126-132: The overscan for the virtualized table is set very high
in the rowVirtualizer configuration (useVirtualizer call) which defeats
virtualization benefits; change the overscan value from 42 to a much smaller,
typical number (e.g., 5-10—try 8) in the options passed to useVirtualizer to
reduce offscreen rendering while keeping smooth scroll behavior.
- Line 49: The ref tableContainerRef is initialized with useRef(null) which
infers RefObject<null>; update its initialization to explicitly type it as
React.RefObject<HTMLDivElement> (or useRef<HTMLDivElement | null>(null)) so it
matches the TableBodyProps typing; change the declaration of tableContainerRef
to useRef<HTMLDivElement | null>(null) (or the equivalent
React.RefObject<HTMLDivElement>) to ensure type safety across the component.

---

Outside diff comments:
In `@src/components/custom/jobsTable/advancedJobFilteringDialog.tsx`:
- Around line 301-308: The FlexibleInput usages (e.g., the instance with
type="regex" in advancedJobFilteringDialog) are getting their pre-filled values
wiped because MultiTypedInput.tsx's useEffect invokes handleTypeChange (lines
around 162-166), which resets internal state and emits an empty value; fix
MultiTypedInput by syncing the internal inputType state directly from props (set
inputType = props.type or similar) in that effect instead of calling
handleTypeChange so you don't reset other internal state or call the
value-emitting logic; ensure handleTypeChange remains the explicit
user-triggered transition and that existing field.value is preserved and not
overwritten when the component mounts.

In `@src/features/jobsTable/jobsTable.tsx`:
- Around line 78-102: Table cells are misaligning because body cells use the
tailwind class "w-full" while headers use "flex flex-grow" and widths are set
via header.column.getSize()/cell.column.getSize(), causing flex-basis to be
overridden; remove "w-full" from the body cell elements (the TableCell elements
that use style={{ width: cell.column.getSize() }}) so they mirror the TableHead
layout, or alternatively change both header and body containers from "flex-grow"
to "flex-shrink-0" (update classNames on TableRow/TableHead and the
corresponding TableCell) to enforce strict sizing based on column.getSize().

---

Duplicate comments:
In `@src/components/custom/general/MultiTypedInput.tsx`:
- Around line 112-117: The emitted payload uses defaultMultiTypeNullValue which
hardcodes type:"exact", so when newType is "regex" (or other types) the emitted
object's type is wrong; update the emission logic in the onChange block (the
code referencing newType, defaultMultiTypeNullValue, and onChange) to emit an
object whose type field equals newType (e.g., construct { type: newType, value:
... } or clone defaultMultiTypeNullValue but set type: newType) and for
"between" continue to emit { value1: "", value2: "" } as before.
- Around line 162-166: The useEffect currently calls handleTypeChange(type) on
mount which triggers the reset logic (clearing internal state and calling
onChange); instead, update the internal inputType state directly without
invoking reset/emit: in the component MultiTypedInput, replace calling
handleTypeChange from the useEffect with a direct state sync (e.g.,
setInputType(type) or the existing inputType setter) so the controlled prop
synchronizes the UI but does not call handleTypeChange or emit an empty value;
alternatively, add an optional flag parameter to handleTypeChange (e.g.,
handleTypeChange(type, { preserveValue: true })) and call that from the
useEffect to avoid clearing value and calling onChange.
- Around line 153-160: The handleBetweenChange callback closes over betweenValue
causing stale updates; change it to use the functional form of setBetweenValue
so you compute the new state from the previous value (e.g. setBetweenValue(prev
=> ({ ...prev, [field]: newValue, type: "between" }))) and call onChange with
that computed updated object; then remove betweenValue from the useCallback
dependency array so the callback only depends on onChange and setBetweenValue
(reference: handleBetweenChange, setBetweenValue, betweenValue, onChange).
- Around line 143-147: validateRegex is only used to call onError when an error
exists, so once the user corrects the pattern the previous error remains; after
computing error = validateRegex(newValue) call onError with a cleared error when
no error is present (e.g., onError?.({ name }, undefined) or null) before
calling onChange so that the parent clears validation state; update the block
around validateRegex/newValue/typedValue to explicitly clear the error when
validateRegex returns falsy.

In `@src/components/custom/jobsTable/advancedJobFilteringDialog.tsx`:
- Around line 218-220: The code currently sends full {value,type} objects for
name/cronSetting/consumer from advancedJobFilteringDialog; verify the backend
contract in JobsService.filterJobs (see JobsService.ts lines around 25-34) to
confirm whether advancedFilters should contain scalar strings or the
{value,type} shape; if the backend expects scalars, change the payload
construction in advancedJobFilteringDialog so name: values.name?.value ?
values.name.value : undefined (and likewise for cronSetting and consumer); if
the backend expects the object shape, leave as-is but add/type the
advancedFilters payload to reflect the {value,type} structure so filterJobs and
any API types match.

In `@src/components/custom/notifications/NotificationServicesPanel.tsx`:
- Line 385: The right details pane in NotificationServicesPanel uses an
unconstrained <div className="flex flex-col gap-2"> which allows content to grow
past the parent overflow-hidden instead of scrolling; update that element (or
its immediate wrapper in NotificationServicesPanel) to be a bounded, scrollable
container by adding sizing and scroll utility classes such as: include min-h-0
and either flex-1 or a max-h value plus overflow-auto (e.g. className="flex
flex-col gap-2 flex-1 min-h-0 overflow-auto") so the column can shrink and
scroll correctly inside the parent.

In `@src/features/jobsTable/jobsTable.tsx`:
- Around line 71-75: The wrapper div in jobsTable.tsx currently injects
"min-h-[800px]" when data is empty, causing a large blank area; remove that
fallback from the className expression so the wrapper only uses cn("rounded-md
border border-border w-full overflow-auto relative", size) and let
TableBodyVirtualized handle the empty state rendering (refer to
TableBodyVirtualized and the size and data variables used in the className
logic).

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/custom/DrawerJobEvents.tsx`:
- Around line 86-92: The workaround using setTimeout in refreshVirtualizer and
the remount via key={allEvents.length} causes unreliable virtualizer updates;
remove the key={allEvents.length} and replace the timeout-based refresh by
adding a useEffect that watches allEvents (or its length/identity) and calls
rowVirtualizer.measure() when it changes (while keeping refreshVirtualizer for
manual triggers if needed); ensure you reference rowVirtualizer.measure and the
allEvents state inside the effect and clean up any stale closures by including
rowVirtualizer in the effect dependency array.
- Line 19: Remove the unused import "debounce" from the top of the
DrawerJobEvents component file; locate the import line that reads import {
debounce } from "@/utils/generalUtils" and delete it (or remove debounce from
the named imports if combined), ensuring the DrawerJobEvents component and any
other imports remain unchanged.
- Around line 70-72: The useMemo for allEvents includes redundant dependencies
(latestEvents.length and events.length); update the dependency array to only
include latestEvents and events so it becomes useMemo(() => [...latestEvents,
...events], [latestEvents, events]) — modify the dependency list around the
allEvents declaration to remove the .length entries while keeping the useMemo
logic unchanged.

In `@src/features/jobsTable/jobsTable.tsx`:
- Around line 170-195: The TableRow inside TableBodyRow has a redundant key prop
(key={row.id}) because the parent map already sets the key; remove the inner key
attribute from the TableRow in the TableBodyRow component (leave data-index,
ref, className, style, and children unchanged) so there’s a single key provided
by the parent mapping over rows.
- Around line 137-146: The TableBody is given a fixed height from
rowVirtualizer.getTotalSize(), which is 0 when rows.length === 0 and causes the
"No results." TableRow (h-24) to be clipped; update the rendering in
jobsTable.tsx so the style for TableBody only sets height when rows exist (e.g.,
if rows.length > 0 use height: `${rowVirtualizer.getTotalSize()}px`) or
alternatively apply a minHeight (e.g., minHeight: '6rem') when rows are empty;
locate the TableBody usage that references rowVirtualizer.getTotalSize() and
adjust the conditional styling to ensure the empty-state TableRow is visible.

---

Outside diff comments:
In `@src/components/custom/dashboard/statsBar.tsx`:
- Around line 7-11: The component is using TooltipProvider (rendered at line
~75) but it's not imported, causing a runtime ReferenceError; fix by adding
TooltipProvider to the import list alongside Tooltip, TooltipContent,
TooltipTrigger from "@/components/ui/tooltip" so the symbol is available when
rendering the error state (update the import statement that currently imports
Tooltip, TooltipContent, TooltipTrigger to also import TooltipProvider).

In `@src/components/custom/general/LogFileList.tsx`:
- Around line 61-68: The FileItem elements rendered from
rowVirtualizer.getVirtualItems() are missing a React key; update the map so each
FileItem receives a stable key (use virtualRow.index or a unique identifier from
the data). For example, inside the mapping that spreads
{...FileList[virtualRow?.index ?? index]}, add a key prop referencing
virtualRow.index or FileList[virtualRow.index].fileId (fall back to
virtualRow.index if no fileId) to ensure proper reconciliation for the FileItem
components.
- Line 48: The useMemo that builds FileList is missing dependencies: add
props.downloadLogFile and props.originName to the dependency array alongside
props.logFiles and props.readLogFile so the memo recomputes when those
callbacks/props change; update the dependency list used in the useMemo call
within the FileList-producing block to include downloadLogFile and originName to
avoid stale references.

---

Duplicate comments:
In `@src/components/custom/DrawerJobEvents.tsx`:
- Line 83: The getItemKey function can throw if allEvents[index] is undefined
during render; update getItemKey (in the DrawerJobEvents component) to guard
against missing items and return a stable fallback key, e.g. use the event id
when present and otherwise fall back to the index or a prefixed index string
(e.g. use allEvents[index]?.id ?? index), ensuring the returned value is always
a string.
- Around line 144-149: The container div is using key={allEvents.length}, which
forces full remounts of the virtualized list; remove that unstable key (or
replace it with a stable identifier if you truly need remounting) and rely on
the virtualizer re-measure flow instead—call refreshVirtualizer /
rowVirtualizer.measure() after updates so the list recomputes sizes rather than
forcing React to unmount/remount the element; update the JSX around the div in
DrawerJobEvents.tsx to drop the length-based key and ensure any existing
refreshVirtualizer usage invokes rowVirtualizer.measure() when items change.

In `@src/components/custom/general/MultiTypedInput.tsx`:
- Around line 155-162: The handleBetweenChange callback closes over betweenValue
causing either stale state or recreation on every keystroke; change it to use
the functional form of setBetweenValue so the callback can omit betweenValue
from its deps and remain stable: inside handleBetweenChange call
setBetweenValue(prev => { const updated = { ...prev, [field]: newValue, type:
"between" }; onChange?.(updated); return updated; }); then update the dependency
array to only include onChange (and any other stable refs) so
handleBetweenChange remains memoized; reference functions/values:
handleBetweenChange, setBetweenValue, onChange, BetweenValue.
- Around line 113-114: The emitted payload uses defaultMultiTypeNullValue which
hardcodes type:"exact", so when newType === "regex" the emitted value has the
wrong type; update the logic in the MultiTypedInput component where newType is
handled (the block that calls onChange?.(defaultMultiTypeNullValue)) to emit a
value whose type matches newType (e.g., clone/construct the default payload but
set type: newType) so onChange receives the correct type for "regex" and
"exact".
- Around line 164-168: The effect currently calls handleTypeChange(type) on
mount which triggers full reset logic; instead only synchronize the local
inputType state when a controlled type prop is provided. Replace the call to
handleTypeChange(type) in the useEffect with logic that sets the internal
inputType (e.g. setInputType(type) or equivalent) and avoid invoking
handleTypeChange so the value initialization effect (value prop handling) isn't
clobbered by the reset; ensure you still react to actual type changes by
invoking handleTypeChange only when a real user-driven change is intended.
- Around line 136-152: The handleRegexChange callback captures the prop name but
it's not declared in the dependency array, causing a stale closure; update the
useCallback dependency array for handleRegexChange to include name (in addition
to onChange and onError) so the closure sees updated name values, and ensure
related symbols (handleRegexChange, setRegexValue, validateRegex, onError,
onChange, name) are referenced correctly when updating the dependency list.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/custom/general/ScrollableList.tsx`:
- Around line 231-244: The sentinel element (loaderRef) must always be present
so the IntersectionObserver can trigger loading; update ScrollableList.tsx to
render the div with ref={loaderRef} unconditionally and only toggle its inner
loader UI based on loading, rather than conditionally rendering the entire
sentinel; ensure the IntersectionObserver callback logic that checks !loading &&
loadMore remains unchanged and will see the always-present sentinel, and remove
the redundant ternary ("opacity-100" / "opacity-0") since the wrapper is always
rendered and only the loader content should change visibility.

---

Outside diff comments:
In `@src/components/custom/general/ScrollableList.tsx`:
- Line 71: The useCallback for loadMoreItems includes an unused dependency
loadMore; update the dependency array of loadMoreItems to only include the
actual used symbols (remove loadMore and keep loading and loadMoreAction) so the
callback isn't recreated unnecessarily, or alternatively reference loadMore
inside loadMoreItems if you intended to use it; locate the useCallback named
loadMoreItems in ScrollableList.tsx and adjust its dependency array accordingly.

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@src/components/custom/DrawerLatestRuns.tsx`:
- Around line 187-202: The memoized SheetDescription uses the
handleGroupingChange callback but its useMemo deps are empty, causing a stale
closure; update the dependency array for SheetDescription to include
handleGroupingChange (and any other callbacks/values it uses, e.g., groupingKey
if referenced) so ManagedSelect receives the current handler (identify
SheetDescription, handleGroupingChange, ManagedSelect, and GroupingOptions in
your diff and add those deps to the useMemo dependency array).
- Around line 145-152: The getLatestRuns callback has unnecessary dependencies
(loading, setItemDateArray, LogItems) causing needless re-creations; update its
dependency array to only include the values actually read inside the callback
(e.g., inputSchema, itemDateArray, groupingKey) and remove loading,
setItemDateArray, and LogItems from the array so React won't recreate
getLatestRuns unnecessarily—locate the getLatestRuns definition and adjust the
dependency list accordingly.
- Around line 177-185: handleGroupingChange is using useCallback with the wrong
dependency (groupingKey) even though it doesn't read it; update the dependency
array to reference resetDrawer instead. Locate the handleGroupingChange callback
that calls setGroupingKey, resetDrawer(), and
scrollableListRef?.current?.resetList() and change its dependency list from
[groupingKey] to [resetDrawer] so the callback is only recreated when
resetDrawer changes; do not add scrollableListRef since refs are stable.

In `@src/components/custom/general/ScrollableList.tsx`:
- Around line 123-126: The resetList useCallback lists items and
currentFocusIndex as dependencies even though the function only calls
setItems([]) and setCurrentFocusIndex(0); remove items and currentFocusIndex
from the dependency array and leave only the setter references (or an empty
array if setters are stable) so resetList is not needlessly re-created; update
the dependency array for resetList accordingly (refer to the resetList function
and the setItems/setCurrentFocusIndex state setters).

In `@src/components/sheet-action-dialog.tsx`:
- Around line 47-50: The detection for React elements uses redundant typeof
checks; simplify by making isTitleElement = isValidElement(props.title) and
isDescriptionElement = isValidElement(props.description) (remove the unnecessary
typeof ... !== "string" guards) so the element checks rely solely on React's
isValidElement helper (update the variables isTitleElement and
isDescriptionElement accordingly).

In `@src/lib/socketUtils.ts`:
- Around line 238-243: The hook's return value in socketUtils.ts no longer
includes latestLogs, which breaks consumers like eventLog.tsx that destructure
latestLogs and call latestLogs.map; re-add latestLogs to the returned object
(alongside subscribeToEvents, unsubscribeFromEvents, logs, logsLoading) so
callers receive the array; ensure the identifier latestLogs used in the return
matches the variable declared/updated within the hook to avoid shadowing or
undefined returns.

In `@src/utils/dateUtils.ts`:
- Around line 36-40: formatDiff currently assumes callers pass Date objects and
will return NaN if given strings; update formatDiff to validate and/or coerce
inputs: check that date1 and date2 are valid Date instances (using instanceof
Date and !isNaN(date.getTime())) and if strings are accepted, attempt new
Date(string) conversion, then handle invalid dates by returning a sensible
fallback (e.g., 'invalid date' or 0 sec) or throwing a clear error; also add a
short JSDoc to formatDiff describing expected parameter types so callers (e.g.,
DrawerLatestRuns.tsx) know to pass Dates or strings.
- Around line 48-54: The logic computing human-readable span uses
differenceInHours/differenceInDays and currently returns hours only when hours <
2, causing 2–23 hour spans to fall through and render as "0 d"; update the
conditional around the computed hours variable (from using hours < 2) to use
hours < 24 so durations under a day render as `${hours} h`, and only
compute/return `${days} d` from differenceInDays when hours >= 24.

---

Duplicate comments:
In `@src/components/custom/general/ScrollableList.tsx`:
- Around line 236-251: In ScrollableList, the loading branch applies a redundant
ternary in the className ("loading ? 'opacity-100' : 'opacity-0'") even though
that JSX only renders when loading is true; replace the conditional with the
static class (e.g., "opacity-100") or remove the opacity logic entirely and
leave the rest of the classes intact on the element that uses loaderRef to keep
the sentinel behavior; update the element that references loaderRef (and any
className uses) accordingly.

In `@src/components/custom/jobsTable/advancedJobFilteringDialog.tsx`:
- Around line 199-201: The filter construction is returning full FlexibleInput
objects (values.name, values.cronSetting, values.consumer) instead of scalar
strings; update the mapping so each property supplies the scalar `.value` when
present (e.g., use values.name?.value ? values.name.value : undefined) for name,
cronSetting, and consumer so JobsService.filterJobs() and exportJobsToJSON()
receive plain strings rather than `{value,type}` objects.